<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li>我是</li>
    <li>好</li>
    <li>我</li>
    <li>他的</li>
    <li>嘿嘿</li>
</ul>
<script>
    /*
    * 事件委托
    *   我们希望只绑定一次事件，即可应用到多个元素上。
    *   为ul绑定一个单机函数
    *   事件的委托
    *    -指事件统一绑定给元素的共同的祖先元素，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
    *    -事件委托实质是利用冒泡的原理。通过委托减少事件的次数。
    * */
    let ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function(e){
        alert('我被点击了')
    }

</script>
</body>
</html>